<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单下拉框</title>
    <link rel="stylesheet" href="/CSS/2.通用样式.css">

    <style>
        header {
            width: 100%;
            height: 100px;
            line-height: 100px;
            background-color: #333;
        }

        header nav {
            width: 1000px;
            height: 100px;
            margin: 0 auto;
            background-color: lightblue;
            font-size: 20px;
        }

        header nav li {
            width: 100px;
            text-align: center;
            position: relative;
        }

        header nav a {
            display: block;
        }

        header nav .active a,
        header nav li a:hover {
            color: white;
            background-color: pink;
        }

        header nav .menu2 {
            display: none;
        }


        header nav .menu2 a{
            border: 1px solid lightblue;
        }

        header nav ul li:hover>ul {
            display: block;
        }
        header nav .menu3{
            display: none;
            position: absolute;
            top: 0;
            left: 99px;
            border: 1px solid lightblue;
        }
    </style>

</head>


<body>
    <header>
        <nav class="clear">
            <ul class="left menu">
                <li class="left active"><a href="#">首页</a></li>
                <li class="left"><a href="#">服务</a>
                    <ul class="menu2">
                        <li><a href="#">服务1</a></li>
                        <li><a href="#">服务2</a></li>
                        <li><a href="#">服务3</a></li>
                    </ul>
                </li>
                <li class="left"><a href="#">版本</a>
                    <ul class="menu2">
                        <li><a href="#">版本1</a>
                            <ul class="menu3">
                                <li><a href="#">Windows</a></li>
                                <li><a href="#">Linux</a></li>
                                <li><a href="#">MacOS</a></li>
                            </ul>
                        </li>
                        <li><a href="#">版本2</a>
                            <ul class="menu3">
                                <li><a href="#">Windows</a></li>
                                <li><a href="#">Linux</a></li>
                                <li><a href="#">MacOS</a></li>
                            </ul>
                        </li>
                        <li><a href="#">版本3</a>
                            <ul class="menu3">
                                <li><a href="#">Windows</a></li>
                                <li><a href="#">Linux</a></li>
                                <li><a href="#">MacOS</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="right">
                <li class="right"><a href="">登录</a></li>
                <li class="right"><a href="">注册</a></li>
            </ul>

        </nav>
    </header>
</body>

</html>